<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:252px;">
                    <div class="user-info">
                        <img src="../../assets/img/img.jpg"  class="user-avator" alt />
                        <div class="user-info-cont">
                            <div style="padding-bottom: 2%" class="user-info-name">{{ userInfo.nickname}}</div>
                            <div>{{userInfo.roleName }}  </div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        上次登录时间：
                        <span>{{ userInfo.createtime |dateTimeFormat}}</span>
                    </div>
                    <div class="user-info-list">
                        上次登录地点：
                        <span>{{ userInfo.province}}-{{ userInfo.city}}</span>
                    </div>
                    <div class="user-info-list">
                        本次登录地点：
                        <span>{{ now.province}}-{{ now.city}}</span>
                    </div>
                </el-card>
                <el-card shadow="hover" style="height:252px;">
                    <div slot="header" class="clearfix">
                        <span>近一周吐司销售榜</span>
                    </div>
                    <div v-for="(item,i) in salesTop">
                        {{ item.productName }}
                        <el-progress :stroke-width="10" :percentage="item.percentage" :color="customColorMethod">
                        </el-progress>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="6">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-4 ">
                                <i class="el-icon-lx-rechargefill grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ salesData.nowTotalPrice }}</div>
                                    <div>本月销售金额</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-rechargefill grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ salesData.preTotalPrice }}</div>
                                    <div>上月销售金额</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-goods  grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ salesData.nowTotalNum }}</div>
                                    <div>本月销售数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{ salesData.preTotalNum }}</div>
                                    <div>上月销售数量</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="hover">
                    <schart ref="line" class="schart" canvasId="line2" :options="options3"></schart>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="line" class="schart" canvasId="line1" :options="options2"></schart>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import { getDayTotal, getStatisticsByYear, getStatistics, getSalesTop, getIndexSales } from '@/api/Dashboard';
import { loginInfo } from '@/api/login';
import format from '@/utils/format';

export default {
    name: 'dashboard',
    data() {
        return {
            userInfo:{
            },
            now:{},
            time:'',

            options: {
                type: 'bar',
                title: {
                    text: '最近一周各品类吐司销售图'
                },
                xRorate: 25,
                labels: [],
                datasets: []
            },
            options2: {
                type: 'line',
                title: {
                    text: '最近半年各品类吐司销售趋势图'
                },
                labels: [],
                datasets: []
            },
            options3: {
                type: 'line',
                title: {
                    text: '近一月吐司销变化'
                },

                bgColor: '#fbfbfb',
                labels: [],
                datasets: []
            },
            salesData: {},
            salesTop: []
        };
    },
    components: {
        Schart
    },
    created() {
        this.getIndexSales();
        this.getSalesTop();
        this.getStatistics();
        this.getStatisticsByYear();
        this.getDayTotal();
        this.getLoginInfo();
        this.timeV();

    },
    methods: {

        customColorMethod(percentage) {
            if (percentage < 20) {
                return '#cd3828';
            } else if (percentage < 40) {
                return '#5c6566';

            } else if (percentage < 60) {
                return '#2271a3';

            } else if (percentage < 80) {
                return '#389375';
            } else if (percentage < 100) {
                return '#7b7a78';
            } else {
                return '#acb4a7';
            }
        },
        getIndexSales() {

            getIndexSales().then(res => {

                if (res.success) {
                    this.salesData = res.data;
                    console.log(this.salesData);
                } else {
                    this.$message.warning(res.message);
                    if (res.code===10005){
                        this.$router.push({path:'/login'});
                    }
                }

            });
        },
        getSalesTop() {
            getSalesTop().then(res => {
                if (res.success) {
                    this.salesTop = res.data;
                } else {
                }

            });
        },
        getStatistics() {
            getStatistics().then(res => {
                if (res.success) {
                    this.options.datasets = res.data.body;
                    this.options.labels = res.data.foot;
                } else {
                }
            });

        },
        getStatisticsByYear() {
            getStatisticsByYear().then(res => {
                if (res.success) {

                    this.options2.datasets = res.data.body;
                    this.options2.labels = res.data.foot;
                } else {
                }
            });
        },
        getDayTotal() {
            getDayTotal().then(res => {
                if (res.success) {
                this.options3.datasets = res.data.body;
                this.options3.labels = res.data.foot;
                } else {
                }
            });
        },
        getLoginInfo(){
            loginInfo().then(res => {
                console.log(res)
                this.userInfo=res.data.loginInfo
                this.now=res.data.now
            })
        },
        timeV() {
        }

    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(90, 126, 165);
}

.grid-con-1 .grid-num {
    color: rgb(90, 143, 198);
}

.grid-con-2 .grid-con-icon {
    background: rgb(91, 179, 101);
}

.grid-con-2 .grid-num {
    color: rgb(98, 144, 193);
}

.grid-con-3 .grid-con-icon {
    background: rgb(163, 87, 73);
}

.grid-con-4 .grid-con-icon {
    background: rgb(160, 175, 93);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 16px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 30px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}
</style>
